<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>date play controller</title>
    <link rel="stylesheet" href="css/single.css">
    <script src="../../libs/jquery/jquery-3.1.1.min.js"></script>
    <script src="js/singledata.js"></script>
</head>
<body>
<ul class="ui-title" id="title">
    <li></li>
    <li>时<span>(h)</span></li>
    <li>一小时降水<span>(mm)</span></li>
    <li>湿度<span>(%)</span></li>
    <li>温度<span>(℃)</span></li>
    <li>风速<span>(m/s)</span></li>
</ul>
<ul class="ul-day" id="daybox">
</ul>
<script>
    singledata = singledata.data;
    var time = singledata.time,
        per = singledata.precipitation,
        rhu = singledata.rhu,
        tem = singledata.temperature,
        wind = singledata.wind;

    var _colors = {
        "per":getColor("per", per[0], true),
        "rhu":getColor("rhu", rhu[0], true),
        "tem":getColor("tem", tem[0], true),
        "wind":getColor("wind", wind[0].value, true)
    };

    var dates = {};
    var _date = time[0].label;
    dates[_date] = [];
    var _count = time.length,
        _perw = 100/_count;

    //数据格式化
    for(var i=0;i<_count;i++){
        var _t = time[i];
        if(_date!=_t.label){
            _date = _t.label;
            dates[_date] = [];
        }
        dates[_date].push({
            "time":_t.time,
            "per":per[i],
            "rhu":rhu[i],
            "tem":tem[i],
            "wind":wind[i]
        });
    }

    //添加ul
    for(var i=0; i<5; i++){
        $("body").append($("<ul/>").addClass("ul-hours"));
    }

    for(var _day in dates) {
        var _hours = dates[_day];
        var _hcount = _hours.length,
            _dwidth = _perw * _hcount,
            _w = "calc(" + _dwidth + "% - 1px";
        var _dayli = $("<li/>").html(_day).css("width", _w);
        $("#daybox").append(_dayli);
        var _www = "calc(" +_perw*_hcount+"% - 1px)"
        var _litime = $("<li/>").css("width", _www).addClass("ul-hour-day"),
            _ultime = $("<ul/>").addClass("ul-hour").appendTo(_litime),

            _liper = $("<li/>").css("width", _www).addClass("ul-hour-day"),
            _ulper = $("<ul/>").addClass("ul-hour").appendTo(_liper),

            _lirhu = $("<li/>").css("width", _www).addClass("ul-hour-day"),
            _ulrhu = $("<ul/>").addClass("ul-hour").appendTo(_lirhu),

            _litem = $("<li/>").css("width",  _www).addClass("ul-hour-day"),
            _ultem = $("<ul/>").addClass("ul-hour").appendTo(_litem),

            _liwind = $("<li/>").css("width", _www).addClass("ul-hour-day"),
            _ulwind = $("<ul/>").addClass("ul-hour").appendTo(_liwind);

        $($(".ul-hours")[0]).append(_litime);
        $($(".ul-hours")[1]).append(_liper);
        $($(".ul-hours")[2]).append(_lirhu);
        $($(".ul-hours")[3]).append(_litem);
        $($(".ul-hours")[4]).append(_liwind);
        var _liw = 100/_hcount+"%";
        for (var i = 0; i < _hcount; i++) {
            _ultime.append($("<li/>").css("width", _liw).css("background","#ccc").html(_hours[i]["time"].substr(0, 2)));
            var _bgPer = "linear-gradient(to right, "+_colors["per"]+", "+getColor("per", _hours[i]["per"])+")";
            _ulper.append($("<li/>").css("width", _liw).css("background",_bgPer).html(_hours[i]["per"].toFixed(0)));

            var _bgRhu = "linear-gradient(to right, "+_colors["rhu"]+", "+getColor("rhu", _hours[i]["rhu"])+")";
            _ulrhu.append($("<li/>").css("width", _liw).css("background",_bgRhu).html(_hours[i]["rhu"].toFixed(0)));

            var _bgTep = "linear-gradient(to right, "+_colors["tem"]+", "+getColor("tem", _hours[i]["tem"])+")";
            _ultem.append($("<li/>").css("width", _liw).css("background",_bgTep).html(_hours[i]["tem"].toFixed(0)));

            var _bgWind = "linear-gradient(to right, "+_colors["wind"]+", "+getColor("wind", _hours[i]["wind"].value)+")";
            _ulwind.append($("<li/>").css("width", _liw)
                .css("background", _bgWind)
                .append($("<span/>").css("transform","rotate("+_hours[i]["wind"].symbolRotate+"deg)").html("↓"))
            );
        }
    }

    function getColor (type, value, isinit){
        var _color = "";
        switch (type){
            case "per":{
                if(value===0){
                    _color = "rgba(0,0,0,0)";
                }else if(value>0&&value<=0.5){
                    _color = "rgba(153,255,153,255)"
                }else if(value>0.5&&value<=1){
                    _color = "rgba(51,204,102,255)"
                }else if(value>1&&value<=2){
                    _color = "rgba(51,153,0,255)"
                }else if(value>2&&value<=3){
                    _color = "rgba(102,204,255,255)"
                }else if(value>3&&value<=5){
                    _color = "rgba(0,102,255,255)"
                }else if(value>5&&value<=7){
                    _color = "rgba(255,255,102,255)"
                }else if(value>7&&value<=10){
                    _color = "rgba(255,204,0,255)"
                }else if(value>10&&value<=13){
                    _color = "rgba(255,51,0,255)"
                }else if(value>13&&value<=16){
                    _color = "rgba(204,0,51,255)"
                }else if(value>16&&value<=20){
                    _color = "rgba(153,0,0,255)"
                }else if(value>20&&value<=25){
                    _color = "rgba(255,102,255,255)"
                }else if(value>25&&value<=40){
                    _color = "rgba(255,0,255,255)"
                }else{
                    _color = "rgba(153,51,204,255)"
                }
                break;
            }
            case "rhu":{
                if(value===0){
                    _color = "rgba(0,0,0,0)"
                }else if(value>0&&value<=10){
                    _color = "rgba(153,0,0,255)"
                }else if(value>10&&value<=20){
                    _color = "rgba(255,102,0,255)"
                }else if(value>20&&value<=30){
                    _color = "rgba(255,153,0,255)"
                }else if(value>30&&value<=40){
                    _color = "rgba(255,204,0,255)"
                }else if(value>40&&value<=50){
                    _color = "rgba(255,255,0,255)"
                }else if(value>50&&value<=60){
                    _color = "rgba(204,255,51,255)"
                }else if(value>60&&value<=70){
                    _color = "rgba(102,255,204,255)"
                }else if(value>70&&value<=80){
                    _color = "rgba(0,204,255,255)"
                }else if(value>80&&value<=90){
                    _color = "rgba(0,102,255,255)"
                }else{
                    _color = "rgba(0,0,153,255)"
                }
                break;
            }
            case "tem":{
                if(value>-30&&value<=-25){
                    _color = "rgba(0,0,255,255)"
                }else if(value-25&&value<=-20){
                    _color = "rgba(0,102,255,255)"
                }else if(value>-20&&value<=-15){
                    _color = "rgba(51,153,255,255)"
                }else if(value>-15&&value<=-10){
                    _color = "rgba(0,204,255,255)"
                }else if(value>-10&&value<=-5){
                    _color = "rgba(0,255,255,255)"
                }else if(value>-5&&value<=0){
                    _color = "rgba(153,255,255,255)"
                }else if(value>0&&value<=5){
                    _color = "rgba(0,255,0,255)"
                }else if(value>5&&value<=10){
                    _color = "rgba(153,255,102,255)"
                }else if(value>10&&value<=15){
                    _color = "rgba(204,255,51,255)"
                }else{
                    _color = "rgba(0,0,153,255)"
                }
                break;
            }
            case "wind":{
                if(value<2){
                    _color = "rgba(0,0,0,0)"
                }else if(value>2&&value<=4){
                    _color = "rgba(0,204,0,255)"
                }else if(value>4&&value<=6){
                    _color = "rgba(204,255,204,255)"
                }else if(value>6&&value<=8){
                    _color = "rgba(255,255,0,255)"
                }else if(value>8&&value<=10){
                    _color = "rgba(255,204,0,255)"
                }else if(value>10&&value<=12){
                    _color = "rgba(255,153,0,255)"
                }else if(value>12&&value<=14){
                    _color = "rgba(255,102,0,255)"
                }else if(value>14&&value<=16){
                    _color = "rgba(255,0,0,255)"
                }else if(value>16&&value<=18){
                    _color = "rgba(204,0,0,255)"
                }else if(value>18&&value<=20){
                    _color = "rgba(153,0,0,255)"
                }else{
                    _color = "rgba(102,0,0,255)"
                }
                break;
            }
        }
        if(!isinit)_colors[type] = _color;
        return _color;
    }
</script>
</body>
</html>